<template>
  <v-layout>
    <template #header>
      <el-button type="primary" @click="toAdd">添加</el-button>
      <el-button type="danger" @click="toDel()">删除</el-button>
    </template>
    <v-table url="/table" ref="tableRef">
      <v-column auto type="selection"></v-column>
      <v-column auto prop="field1" label="字段1"></v-column>
      <v-column auto prop="field2" label="字段2"></v-column>
      <v-column auto label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="toUp(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="toDel(row)"
            >删除</el-button
          >
        </template>
      </v-column>
    </v-table>
  </v-layout>

  <v-dialog
    v-model="addVisible"
    title="新增"
    width="400px"
    @confirm="add"
    :action-loading="addLoading"
    @closed="addReset"
  >
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addFormRef"
      label-position="top"
    >
      <el-form-item prop="field1" label="字段1">
        <el-input placeholder="请输入字段1" v-model="addForm.field1"></el-input>
      </el-form-item>
      <el-form-item prop="field2" label="字段2">
        <el-input placeholder="请输入字段2" v-model="addForm.field2"></el-input>
      </el-form-item>
    </el-form>
  </v-dialog>
  <v-dialog
    v-model="upVisible"
    title="编辑"
    width="400px"
    @confirm="up"
    :action-loading="upLoading"
    @closed="upReset"
  >
    <el-form
      :model="upForm"
      :rules="rules"
      ref="upFormRef"
      label-position="top"
    >
      <el-form-item prop="field1" label="字段1">
        <el-input placeholder="请输入字段1" v-model="upForm.field1"></el-input>
      </el-form-item>
      <el-form-item prop="field2" label="字段2">
        <el-input placeholder="请输入字段2" v-model="upForm.field2"></el-input>
      </el-form-item>
    </el-form>
  </v-dialog>
</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { useSubmit } from "@/hooks/useSubmit";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox, type FormRules } from "element-plus";
import { markRaw, reactive, ref } from "vue";

interface Data {
  field1: string;
  field2: string;
}

const rules: FormRules = {
  field1: [
    { required: true, message: "字段1不能为空", trigger: "change" },
    { min: 1, max: 10, message: "字段1长度1-10位", trigger: "change" },
  ],
  field2: [{ required: true, message: "字段2不能为空", trigger: "change" }],
};

const { tableRef, getSelectionRows, reload } = useTable();

// 新增
const addForm = reactive<Data>({
  field1: "",
  field2: "",
});
const addVisible = ref(false);
const toAdd = () => {
  addVisible.value = true;
};
const {
  loading: addLoading,
  submit: add,
  formRef: addFormRef,
  reset: addReset,
} = useSubmit({
  form: addForm,
  ajax: async () => {
     // eg: await insert('/delete');
    ElMessage.success("添加职务信息成功");
    reload();
    addVisible.value = false;
  },
});

// 编辑
const upForm = reactive<Data>({
  field1: "",
  field2: "",
});
const upVisible = ref(false);
const toUp = (row: Data) => {
  upVisible.value = true;
  upForm.field2 = row.field2;
  upForm.field1 = row.field1;
};
const {
  loading: upLoading,
  submit: up,
  formRef: upFormRef,
  reset: upReset,
} = useSubmit({
  form: upForm,
  ajax: async () => {
     // eg: await fetch('/update');
    ElMessage.success("编辑职务信息成功");
    reload();
    upVisible.value = false;
  },
});

// 删除
const toDel = (row?: Data) => {
  let delRows: Data[] = [];
  if (row) {
    // 单选删除
    delRows.push(row);
  } else {
    // 多选删除
    const selection = getSelectionRows();
    if (!selection || !selection.length) {
      ElMessage.warning("至少选择一条数据");
      return;
    }
    delRows = selection;
  }
  console.log(delRows);
  ElMessageBox.confirm("数据将被永久删除，是否确定？", "提示", {
    type: "warning",
    icon: markRaw(Delete),
    async callback(action: string) {
      if (action === "confirm") {
        // 发送删除请求
        // eg: await fetch('/delete');
        ElMessage.success("删除职务信息成功");
        reload();
      }
    },
  });
};
</script>
